<template>
  <v-container class="select-time">
    <v-row>
      <v-col cols="12" sm="5" class="select-time-item">
        <span class="select-time-label" :class="$i18n.locale">
          {{ $t('selectTime.pickUpTime') }}:
        </span>
        <date-picker
          ref="startPicker"
          v-model="start"
          style="height: 34px; width: 210px"
          popup-class="select-time-popup"
          type="datetime"
          value-type="format"
          format="YYYY-MM-DD HH:mm"
          :disabled-date="startDisabledDate"
          :disabled-time="startDiabledTime"
          :editable="false"
          :time-picker-options="timePickerOptions"
          @change="handleStartChange"
        />
      </v-col>
      <v-col cols="12" sm="5" class="select-time-item">
        <span class="select-time-label" :class="$i18n.locale">
          {{ $t('selectTime.dropOffTime') }}:
        </span>
        <date-picker
          ref="endPicker"
          v-model="end"
          style="height: 34px; width: 210px"
          :default-value="dayjs(start).toDate()"
          popup-class="select-time-popup"
          type="datetime"
          value-type="format"
          format="YYYY-MM-DD HH:mm"
          :disabled="!start"
          :disabled-date="endDisabledDate"
          :disabled-time="endDiabledTime"
          :editable="false"
          :time-picker-options="timePickerOptions"
        />
      </v-col>
      <v-col cols="12" sm="2" class="btn-col">
        <v-btn rounded class="btn" @click="handleSearch">
          {{ $t('search') }}
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import dayjs from 'dayjs';

export default {
  ssr: false,
  components: {
    DatePicker
  },
  props: {
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    businessTime: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      start: '',
      end: ''
    };
  },
  computed: {
    timePickerOptions() {
      const { startTime = '00:00', endTime = '23:30' } = this.businessTime;
      return {
        start: startTime,
        step: '00:30',
        end: endTime,
        format: 'HH:mm'
      };
    }
  },
  watch: {
    startTime(val) {
      this.start = val;
    },
    endTime(val) {
      this.end = val;
    }
  },
  methods: {
    dayjs,
    handleSearch() {
      this.$emit('search', this.start, this.end);
    },
    handleStartChange() {
      this.end = '';
    },
    startDisabledDate(date) {
      const { endTime = '23:30' } = this.businessTime;
      const end = dayjs(`${dayjs(date).format('YYYY-MM-DD')} ${endTime}`).valueOf();
      if (end <= dayjs().valueOf()) return true;
      return date.getTime() < dayjs().startOf('day').valueOf();
    },
    startDiabledTime(date) {
      return dayjs(date).valueOf() <= dayjs().valueOf();
    },
    endDisabledDate(date) {
      if (!this.start) return true;
      const { endTime = '23:30' } = this.businessTime;
      const end = dayjs(`${dayjs(date).format('YYYY-MM-DD')} ${endTime}`).valueOf();
      if (end <= dayjs(this.start).valueOf()) return true;
      return date.getTime() < dayjs(this.startTime).startOf('day').valueOf();
    },
    endDiabledTime(date) {
      if (!this.start) return true;
      return dayjs(date).valueOf() <= dayjs(this.start).valueOf();
    }
  }
};
</script>
<style scoped lang="scss">
.select-time {
  margin: 16px 0;
  padding: 0 12px;
}
.select-time-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.select-time-label {
  margin-right: 6px;
  display: inline-block;
  width: 90px;
  font-weight: bolder;
  &.en {
    width: 120px;
  }
}
.btn-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  height: 40px !important;
  background: rgb(252, 246, 246) !important;
  border-radius: 28px;
  border: 1px solid #fad8da;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: 16px;
  color: #e42129;
  line-height: 25px;
  text-align: center;
  font-style: normal;
  box-shadow: none;
}
</style>
<style>
.select-time-popup {
  .mx-time-option {
    text-align: center;
    &.disabled {
      display: none;
    }
  }
  .mx-btn-icon-double-right,
  .mx-btn-icon-double-left {
    display: none;
  }
}
</style>
